{include file="public/header"}
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>发布优惠券</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css"/>
    <!--<link rel="stylesheet" href="__JS__/webuploader/webuploader.css" >&lt;!&ndash;webUploader上传组件&ndash;&gt;-->
    <!--<link rel="stylesheet" href="__JS__/webuploader/style.css" >&lt;!&ndash;webUploader上传组件&ndash;&gt;-->
    <link href="/static/admin/css/font-awesome.min.css?v=4.7.0" rel="stylesheet">
    <link href="__JSS__/plugins/layui/css/layui.css" rel="stylesheet">
    <style type="text/css">

        html body {
            margin: 0;
            background-color: #EEEEEE;
            width: 100%;
            height: 100%;
            font-size: 14px;
            color: #333333;
            font-weight: 500;
        }

        .flex-wrap {
            display: -webkit-box;
            display: box;
            display: -webkit-flex;
            display: flex;
        }

        .flex-con {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }

        .flex-vertical {
            -webkit-box-horizontal: vertical;
            -webkit-flex-flow: column;
            flex-flow: column;
        }

        .wrap1 {
            width: 100%;
            background: #3F3F3F;
            height: 30px;
            line-height: 30px;
        }

        .wrap1 .content1 {
            margin: 0 auto;
            width: 1200px;
            font-size: 12px;
            color: #ffffff;
            /*position: relative;*/
            display: -webkit-box;
            display: box;
            display: -webkit-flex;
            display: flex;
        }

        .kong {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }

        .content12 {
            position: relative;
        }

        .redhot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #BA0000;
            position: absolute;
            left: 24px;
            top: 5px;
        }

        .wrap2 {
            line-height: 60px;
            width: 100%;
            height: 60px;
            background: #ffffff;
        }

        .content2 {
            margin: auto;
            width: 1200px;
            display: -webkit-box;
            display: box;
            display: -webkit-flex;
            display: flex;
        }

        .content2_left {
            width: 190px;
            font-size: 18px;
            color: #333333;
        }

        .content2_left span {
            display: inline-block;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #0065F0;
            vertical-align: middle;
            margin-right: 11px;
        }

        .content_middle {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            text-align: left;
            display: -webkit-box;
            display: box;
            display: -webkit-flex;
            display: flex;

        }

        .content_right {
            font-size: 16px;
        }

        .content_right img {
            display: inline-block;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 20px;
            vertical-align: middle;
        }

        .content_middle .item {
            width: 152px;
        }

        .content_middle .item.active2 {
            color: #0065F0;
        }

        .wrap3 {
            line-height: 60px;
            width: 100%;
            height: 60px;
            background: #0065F0;
        }

        .content3 {
            margin: auto;
            width: 1200px;
            display: -webkit-box;
            display: box;
            display: -webkit-flex;
            display: flex;
        }

        .content3-left {
            line-height: 60px;
            color: #ffffff;
            font-size: 16px;
        }

        .wrap4 {
            background: #EEEEEE;
            width: 100%;
            padding-top: 30px;
            padding-bottom: 80px;

        }

        .content4 {
            margin: auto;
            width: 1200px;
            /*display: flex;*/
            background: #ffffff;
            padding-top: 50px;
            /*padding-bottom: 40px;*/
        }

        .item4 {
            display: -webkit-box;
            display: box;
            display: -webkit-flex;
            display: flex;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            margin-bottom: 30px;
        }

        .item4_left {
            width: 184px;
            text-align: right;
            margin-right: 30px;
        }

        .item4_middle {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            position: relative;
            display: -webkit-box;
            display: box;
            display: -webkit-flex;
            display: flex;
        }

        select {
            margin-right: 20px;
            /*flex:1;*/
            width: 160px;
            outline: none;
        }

        option {
            width: 160px;
            height: 34px;
        }

        .inputrenwu {
            padding-left: 11px;
            box-sizing: border-box;
            display: inline-block !important;
            width: 520px !important;
            height: 34px !important;
            line-height: 34px !important;
            border: 1px solid #CCCCCC !important;
            border-radius: 3px;
            outline: none;
        }

        .item4_middle .upload {
            width: 72px;
            height: 34px;
            padding-left: 40px;
            line-height: 34px;
            border: 1px solid #CCCCCC;
            border-radius: 3px;
            margin-right: 60px;
            color: #CCCCCC;
            position: relative;
        }

        .shangchuan {
            position: absolute;
            left: 15px;
            top: 9px;
            width: 16px;
            height: 16px;
            display: block;
        }

        .item4_middle .upload2 {
            width: 82px;
            height: 34px;
            background: #0065F0;
            line-height: 34px;
            border-radius: 3px;
            padding-right: 15px;
            padding-left: 15px;
            padding-right: 15px:
            margin-right: 60px;
            color: #ffffff;
        }

        .item4_middle .upload img {
            vertical-align: middle;
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }

        .item4_middle .text {
            position: absolute;
            left: 0px;
            top: 42px;
            font-size: 12px;
            color: #CCCCCC;
            line-height: 12px
        }

        .ellipsi1 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .lable {
            width: 110px;
        }

        .lable .span1,.lable .span11 {
            display: inline-block;
            width: 14px;
            height: 14px;
            vertical-align: middle;
            margin-right: 11px;
            border: 1px solid #D9D9D9;
            border-radius: 50%;
        }

        .lable .span2 {
            display: inline-block;
            width: 14px;
            height: 14px;
            vertical-align: middle;
            margin-right: 11px;
            border: 1px solid #0065F0;
            border-radius: 50%;
            background-size: 100% 100%;
            background: url(__IMG__/yuanhuan1.png) no-repeat center center;
        }

        .radioched,.radioched2 {
            display: inline-block;
            width: 14px;
            height: 14px;
            vertical-align: middle;
            margin-right: 11px;
        }

        .span2 img {
            width: 14px;
            height: 14px;
        }

        .hidden {
            display: none !important;
        }

        .danwei {
            font-size: 14px;
            color: #333333;
            margin-left: 10px;
        }

        .item4_middle .add {
            width: 102px;
            height: 102px;
            margin-right: 60px;
            position: relative;
        }

        .delete {
            position: absolute;
            bottom: 0;
            width: 100%;
            left: 0;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: rgba(0, 0, 0, 0.3);
            color: #ffffff;
            font-size: 12px;
        }

        .add img {
            width: 100%;
            height: 100%;
        }

        .startime {
            /*width: 160px;*/
            height: 34px;
            border: 1px solid #CCCCCC;
            border-radius: 3px;
            padding: 0 10px;
            box-sizing: border-box;
            margin-right: 10px;
            color: #333333;
            display: flex;
            position: relative;

            display: -webkit-box;
            display: box;
            display: -webkit-flex;
            display: flex;
        }

        .startime_text {
        }

        .startime_middle {
            flex: 1;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;

        }

        .jianjie {
            width: 520px;
            /*height: 270px;*/
            height: auto;
            padding: 20px;
            box-sizing: border-box;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: 1px solid rgba(204, 204, 204, 1);
        }

        .jianjie img {
            display: block;
            width: 100px;
            height: 100px;
            margin-bottom: 16px;
        }

        .jianjie p {
            font-size: 12px;
            line-height: 18px;
            color: #666666;
        }

        .select {
            margin-right: 20px;
            width: 160px;
            height: 34px;
            border-radius: 3px;
            border: 1px solid #cccccc;
            display: flex;
            padding-left: 10px;
            box-sizing: border-box;
            line-height: 34px;
            color: #666666;
            font-size: 12px;
            position: relative;
        }

        .everyoption {
            text-indent: 10px;
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            color: #999999;
        }

        .everyoption:hover {
            background: #0065F0;
            color: #ffffff;

        }

        .alloption {
            display: none;
            background: #ffffff !important;
            z-index: 999;
            padding-left: 0px;

            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 36px;
            border: 1px solid #eeeeee;
            height: auto;
            box-shadow: 0px 0px 6px 0px rgba(0, 101, 240, 0.6);
            width: 160px;
            overflow-y: scroll;
            max-height: 256px;
        }

        .select .option {
            flex: 1;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;

        }

        .sanjiao_wrap {
            border-left: 1px solid #cccccc;

            width: 32px;
            height: 32px;
            position: absolute;
            right: 0px;
            top: 0px;
        }

        .sanjiao2 {

            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 32px;
            height: 32px;
            transform: translate(-50%, -50%);

            -ms-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
        }

        .sanjiao1 {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 32px;
            height: 32px;
            transform: translate(-50%, -50%) rotate(180deg);

            -ms-transform: translate(-50%, -50%) rotate(180deg);
            -moz-transform: translate(-50%, -50%) rotate(180deg);
            -webkit-transform: translate(-50%, -50%) rotate(180deg);
            -o-transform: translate(-50%, -50%) rotate(180deg);
        }

        * {
            cursor: pointer;
        }

        .btn1 {
            width: 130px;
            height: 34px;
            background: #0065F0;
            color: #ffffff;
            line-height: 34px;
            text-align: center;
            margin-right: 35px;
            font-size: 12px;

        }

        .btn2 {
            font-size: 12px;
            width: 130px;
            height: 34px;
            background: #F7F7F7;
            color: #D9D9D9;
            line-height: 34px;
            text-align: center;
            margin-right: 35px;
        }
    </style>
    <style>
        .selecttttName1 {
            background: #0065F0;
            color: #ffffff;
        }
        .w-e-text-container{
            height: 300px !important;/*!important是重点，因为原div是行内样式设置的高度500px*/
        }
    </style>
</head>

<body>
<div class="wrap3">
    <div class="content3">
        <div class="content3-left">
            卡券管理 > 发布
        </div>
    </div>
</div>
<div class="wrap4">
    <!--<form id="fabutask" action="/shop/Task/test" method="post" enctype="multipart/form-data">-->
    <form id="fabutask">
        <div class="content4">
            <div class="item4" style="height:auto;">
                <div class="item4_left">
                    卡券图片
                </div>
                <input type="file" accept="image/*" id="fileimg" onChange="previewimg(this)" style="display:none;" name ="input_image" >
                <div class="item4_middle"  id="uploader"><!--如果不加这个id=uploader下面的王编辑器加载不出来。。。-->
                    <div class="add uploadimg">
                        <img src="__IMG__/addpic.png" alt="">
                    </div>
                    <div class="add imgshow">
                        <img id="imgsrc" src="{$data.coupon_image}" alt="">
                        <div class="delete" onclick="delimg();">
                            删除
                        </div>
                    </div>
                </div>
            </div>
            <div class="item4 task_href">
                <div class="item4_left xiazai">
                    卡券名称
                </div>
                <div class="item4_middle">
                    <input class="inputrenwu" name="task_name" type="text" placeholder="请填写卡券名称" value="{$data.coupon_name}">
                </div>
            </div>
            <div class="item4">
                <div class="item4_left">
                    卡券数量
                </div>
                <div class="item4_middle">
                    <input class="inputrenwu" value="{$data.coupon_num}" disabled name="task_num" id="task_num" type="text" oninput = "handleMoney(this,0);" placeholder="请输入数字" style="width:160px;">
                    <div class="danwei">/个</div>
                </div>
            </div>
            <div class="item4">
                <div class="item4_left">
                    兑换金币数
                </div>
                <div class="item4_middle">
                    <input class="inputrenwu" value="{$data.coupon_price}" disabled name="task_price" id="task_price" type="text" oninput = "handleMoney(this,0);" placeholder="最多保留一位小数" style="width:160px;">
                    <div class="danwei">/平台币
                        <span style="margin-left:20px;">兑换卡券所需金币数
                   </span>
                    </div>
                    <div class="text">注：1元=10平台币
                    </div>


                </div>
            </div>
            <div class="item4" style="padding-top:15px;">
                <div class="item4_left">
                    总金额

                </div>
                <div class="item4_middle">
                    <input class="inputrenwu" type="text" name="money" id="money" value="{$data.coupon_num * $data.coupon_price}" style="width:160px;" disabled>
                    <div class="danwei">/平台币

                    </div>

                </div>
            </div>
            <div class="item4">
                <div class="item4_left">
                    卡券面额
                </div>
                <div class="item4_middle">
                    <input class="inputrenwu" value="{$data.coupon_money}" disabled name="coupon_money" type="text" oninput = "handleMoney2(this,1);" placeholder="请输入卡券面额">
                </div>
            </div>

            <!--曝光率和到达率的二期新增 start-->

            <!--曝光率和到达率的二期新增  end -->

            <div class="item4">
                <div class="item4_left">
                    领取有效期
                </div>
                <div class="item4_middle">
                    <div class="item4_middle">
                        <input style="border: none" type="text" disabled class="inputrenwu" value="{$data.coupon_start} / {$data.coupon_end}" name="task_starttime" />
                    </div>
                </div>
            </div>
            <div class="item4">
                <div class="item4_left">
                    使用有效期
                </div>
                <div class="item4_middle">
                    <input class="inputrenwu" disabled value="{$data.coupon_use_day} 天" name="coupon_use_day" type="text" oninput = "handleMoney2(this,0);" placeholder="请输入卡券领取后的使用期限">
                </div>
            </div>
            <div class="item4 task_share_type" style="padding-top:15px;">
                <div class="item4_left">
                    状态
                </div>
                <div class="item4_middle">
                    <div class="lable" onclick="choosetype(0)">
                        <span class="span1 hidden"></span>
                        <img src="__IMG__/radio.png" class="radioched"> 上架

                    </div>
                    <div class="lable" onclick="choosetype(1)">
                        <img src="__IMG__/radio.png" class="radioched hidden">
                        <span class="span1"></span> 下架
                    </div>
                    <div class="text">注：下架之后不可再上架
                    </div>
                </div>

            </div>
            <!--d-->
            <div class="item4" style="height:34px;padding:40px 0;margin-bottom:0;">
                <div class="item4_left">

                </div>
                <div class="item4_middle">
                    <div class="btn1">
                        立即发布

                    </div>
                    <div class="btn2" onclick="history.go(-1)">
                        取消
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="coupon_id" id="coupon_id" value="{$data.coupon_id}" />
        <input type="hidden" name="task_share_type" id="task_share_type" value="1" />
        <input type="hidden" name="task_image" id="task_image" value="{$data.coupon_image}" /><!--为1没传图  为2已传图-->
        <!--防止重复提交-->
        <input type="hidden" name="repeatSubmit" id="repeatSubmit" value="1" />
        <!--<input type="submit" value="上传文件">-->
    </form>
</div>
</div>
</body>
{include file="public/footer"}
<script type="text/javascript" src="__JSS__/plugins/layui/layui.all.js"></script>
<script type="text/javascript" src="__JS__/wk.js"></script>
<script type="text/javascript" src="__JS__/webuploader/webuploader.js"></script>
<script src="__SCRIPT__/common.js" ></script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //同时绑定多个
        lay('.test_item').each(function(){
            laydate.render({
                elem: this
                ,format:'yyyy-MM-dd'
                ,type:'date'
                ,trigger: 'click'
            });
        });
    });
</script>
<script type="text/javascript">
    function choosetype(index) {
        var span1 = document.getElementsByClassName('span1');
        var radioched = document.getElementsByClassName('radioched');
        for (var i = 0; i < span1.length; i++) {
            span1[i].className = 'span1';
            radioched[i].className = 'radioched hidden';

        }
        span1[index].className = 'span1 hidden';
        radioched[index].className = 'radioched';
        $('#task_share_type').val(1);
        if(index == 1){
            $('#task_share_type').val(3);
        }

    }
    $('.uploadimg').click(function () {
        $('#fileimg').click();
    });

    function previewimg(obj){
        var src = window.URL.createObjectURL(obj.files[0]);
        $('#imgsrc').attr('src',src);
        $('.imgshow').removeClass('hidden');
        uploadImageCommon('fabutask','task_image');
    }
    function delimg(){
        $('.imgshow').addClass('hidden');
        $('#task_image').val('');
    }
    $('.btn1').click(function () {
        var repeatSubmit = $('#repeatSubmit').val();
        if(repeatSubmit == 2){
            alert('请勿重复提交！');
            return false;
        }else{
            var submitInfo = formCheck();
            if(submitInfo.status == 200){
                $('#repeatSubmit').val(2);
                var formData = $( "#fabutask" ).serialize();
                $.ajax({
                    url: '/shop/Coupon/editTask',
                    data: formData,
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (returnData) {
                        alert(returnData.msg);
                        if(returnData.status == 200){
                            window.location.href = '/shop/Coupon/homePage';
                            return true;
                        }else{
                            $('#repeatSubmit').val(1);
                        }
                    },
                    error: function () {
                        alert('服务器错误，请刷新重试！');
                    }
                })
            }else{
                alert(submitInfo.msg);
                return false;
            }
        }
    });

</script>

<script>
    function handleMoney(obj,type){
        if(type == 0){
            obj.value = obj.value.replace(/[^\d]/g, '');
            obj.value = obj.value.replace(/\.{2,}/g, '.');
            obj.value = obj.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
            if (obj.value.indexOf('.') < 0 && obj.value != '') {
                obj.value = parseFloat(obj.value);
            }
            if ((obj.value.length == 1 && obj.value == '.') || obj.value.substring(0,1) == '.') {
                obj.value = '';
            }
        }else{
            obj.value = obj.value.replace(/[^\d.]/g, '');
            obj.value = obj.value.replace(/\.{2,}/g, '.');
            obj.value = obj.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
//            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入1个小数
            if (obj.value.indexOf('.') < 0 && obj.value != '') {
                obj.value = parseFloat(obj.value);
            }
            if ((obj.value.length == 1 && obj.value == '.') || obj.value.substring(0,1) == '.') {
                obj.value = '';
            }
        }

        var value1 = $('#task_num').val();
        var value2 = $('#task_price').val();
        if(value1 && value2){
            var res = value1*value2;
            $('#money').val(res.toFixed(0));
        }else{
            $('#money').val(0);
        }
    }
    function handleMoney2(obj,type){
        if(type == 0){
            obj.value = obj.value.replace(/[^\d]/g, '');
            obj.value = obj.value.replace(/\.{2,}/g, '.');
            obj.value = obj.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
            if (obj.value.indexOf('.') < 0 && obj.value != '') {
                obj.value = parseFloat(obj.value);
            }
            if ((obj.value.length == 1 && obj.value == '.') || obj.value.substring(0,1) == '.') {
                obj.value = '';
            }
        }else{
            obj.value = obj.value.replace(/[^\d.]/g, '');
            obj.value = obj.value.replace(/\.{2,}/g, '.');
            obj.value = obj.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
//            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入1个小数
            if (obj.value.indexOf('.') < 0 && obj.value != '') {
                obj.value = parseFloat(obj.value);
            }
            if ((obj.value.length == 1 && obj.value == '.') || obj.value.substring(0,1) == '.') {
                obj.value = '';
            }
        }
    }
</script>
<script>
    function formCheck() {
        var res = {
            'status':'200',
            'msg':'OK'
        };
        var task_image = $('input[name="task_image"]').val();
        var task_name = $('input[name="task_name"]').val();

        if(!task_image){
            res.status = 0;
            res.msg = '优惠券图片不能为空';
            return res;
        }
        if(!task_name){
            res.status = 0;
            res.msg = '优惠券名称不能为空';
            return res;
        }
        return res;
    }
    function datetime_to_unix(datetime){
        var tmp_datetime = datetime.replace(/:/g,'-');
        tmp_datetime = tmp_datetime.replace(/ /g,'-');
        var arr = tmp_datetime.split("-");
        var now = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));
        return parseInt(now.getTime()/1000);
    }
</script>